<template>
  <a-modal
    :title="title"
    :width="1200"
    :height="1200"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <div class="html">
      <div class="body">
        <div class="left">
          <div id="divPlugin" class="plugin"></div>
          <fieldset class="login">
            <legend>登录</legend>
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">IP地址</td>
                <td><input id="loginip" type="text" class="txt" value="172.10.18.59"/></td>
                <td class="tt">端口号</td>
                <td><input id="port" type="text" class="txt" value="80"/></td>
              </tr>
              <tr>
                <td class="tt">用户名</td>
                <td><input id="username" type="text" class="txt" value="admin"/></td>
                <td class="tt">密码</td>
                <td><input id="password" type="password" class="txt" value="12345678q"/></td>
              </tr>
              <tr>
                <td class="tt">设备端口</td>
                <td colspan="2"><input id="deviceport" type="text" class="txt"/>（可选参数）</td>
                <td>
                  窗口分割数&nbsp;
                  <select class="sel2" onchange="changeWndNum(this.value);">
                    <option value="1">1x1</option>
                    <option value="2" selected>2x2</option>
                    <option value="3">3x3</option>
                    <option value="4">4x4</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">RTSP端口</td>
                <td colspan="3"><input id="rtspport" type="text" class="txt"/>（可选参数）</td>
              </tr>
              <tr>
                <td colspan="4">
                  <input type="button" class="btn" value="登录" @click="clickLogin();"/>
                  <input type="button" class="btn" value="退出" onclick="clickLogout();"/>
                  <input type="button" class="btn2" value="获取基本信息" onclick="clickGetDeviceInfo();"/>
                </td>
              </tr>
              <tr>
                <td class="tt">已登录设备</td>
                <td>
                  <select id="ip" class="sel" onchange="getChannelInfo();getDevicePort();"></select>
                </td>
                <td class="tt">通道列表</td>
                <td>
                  <select id="channels" class="sel"></select>
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="ipchannel">
            <legend>数字通道</legend>
            <table width="100%" cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td><input type="button" class="btn" value="获取数字通道列表" onclick="clickGetDigitalChannelInfo();"/></td>
              </tr>
              <tr>
                <td>
                  <div class="digitaltdiv">
                    <table id="digitalchannellist" class="digitalchannellist" cellpadding="0" cellspacing="0"
                           border="0"></table>
                  </div>
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="localconfig">
            <legend>本地配置</legend>
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">播放性能</td>
                <td>
                  <select id="netsPreach" name="netsPreach" class="sel">
                    <option value="0">最短延时</option>
                    <option value="1">实时性好</option>
                    <option value="2">均衡</option>
                    <option value="3">流畅性好</option>
                  </select>
                </td>
                <td class="tt">图像尺寸</td>
                <td>
                  <select id="wndSize" name="wndSize" class="sel">
                    <option value="0">充满</option>
                    <option value="1">4:3</option>
                    <option value="2">16:9</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">规则信息</td>
                <td>
                  <select id="rulesInfo" name="rulesInfo" class="sel">
                    <option value="1">启用</option>
                    <option value="0">禁用</option>
                  </select>
                </td>
                <td class="tt">抓图文件格式</td>
                <td>
                  <select id="captureFileFormat" name="captureFileFormat" class="sel">
                    <option value="0">JPEG</option>
                    <option value="1">BMP</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">录像文件打包大小</td>
                <td>
                  <select id="packSize" name="packSize" class="sel">
                    <option value="0">256M</option>
                    <option value="1">512M</option>
                    <option value="2">1G</option>
                  </select>
                </td>
                <td class="tt">协议类型</td>
                <td>
                  <select id="protocolType" name="protocolType" class="sel">
                    <option value="0">TCP</option>
                    <option value="2">UDP</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">录像文件保存路径</td>
                <td colspan="3"><input id="recordPath" type="text" class="txt"/>&nbsp;<input type="button" class="btn"
                                                                                             value="浏览"
                                                                                             onclick="clickOpenFileDlg('recordPath', 0);"/>
                </td>
              </tr>
              <tr>
                <td class="tt">回放下载保存路径</td>
                <td colspan="3"><input id="downloadPath" type="text" class="txt"/>&nbsp;<input type="button" class="btn"
                                                                                               value="浏览"
                                                                                               onclick="clickOpenFileDlg('downloadPath', 0);"/>
                </td>
              </tr>
              <tr>
                <td class="tt">预览抓图保存路径</td>
                <td colspan="3"><input id="previewPicPath" type="text" class="txt"/>&nbsp;<input type="button"
                                                                                                 class="btn" value="浏览"
                                                                                                 onclick="clickOpenFileDlg('previewPicPath', 0);"/>
                </td>
              </tr>
              <tr>
                <td class="tt">回放抓图保存路径</td>
                <td colspan="3"><input id="playbackPicPath" type="text" class="txt"/>&nbsp;<input type="button"
                                                                                                  class="btn" value="浏览"
                                                                                                  onclick="clickOpenFileDlg('playbackPicPath', 0);"/>
                </td>
              </tr>
              <tr>
                <td class="tt">回放剪辑保存路径</td>
                <td colspan="3"><input id="playbackFilePath" type="text" class="txt"/>&nbsp;<input type="button"
                                                                                                   class="btn"
                                                                                                   value="浏览"
                                                                                                   onclick="clickOpenFileDlg('playbackFilePath', 0);"/>
                </td>
              </tr>
              <tr>
                <td class="tt">设备抓图保存路径</td>
                <td colspan="3"><input id="devicePicPath" type="text" class="txt"/>&nbsp;<input type="button"
                                                                                                class="btn" value="浏览"
                                                                                                onclick="clickOpenFileDlg('devicePicPath', 0);"/>
                </td>
              </tr>
              <tr>
                <td colspan="4"><input type="button" class="btn" value="获取" onclick="clickGetLocalCfg();"/>&nbsp;<input
                  type="button" class="btn" value="设置" onclick="clickSetLocalCfg();"/></td>
              </tr>
            </table>
          </fieldset>
        </div>
        <div class="left">
          <fieldset class="preview">
            <legend>预览</legend>
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">码流类型</td>
                <td>
                  <select id="streamtype" class="sel">
                    <option value="1">主码流</option>
                    <option value="2">子码流</option>
                    <option value="3">第三码流</option>
                    <option value="4">转码码流</option>
                  </select>
                </td>
                <td>
                  <input type="button" class="btn" value="开始预览" onclick="clickStartRealPlay();"/>
                  <input type="button" class="btn" value="停止预览" onclick="clickStopRealPlay();"/>
                </td>
              </tr>
              <tr>
                <td class="tt">音量</td>
                <td>
                  <input type="text" id="volume" class="txt" value="50" maxlength="3"/>&nbsp;<input type="button"
                                                                                                    class="btn"
                                                                                                    value="设置"
                                                                                                    onclick="clickSetVolume();"/>（范围：0~100）
                </td>
                <td>
                  <input type="button" class="btn" value="打开声音" onclick="clickOpenSound();"/>
                  <input type="button" class="btn" value="关闭声音" onclick="clickCloseSound();"/>
                </td>
              </tr>
              <tr>
                <td class="tt">对讲通道</td>
                <td>
                  <select id="audiochannels" class="sel">

                  </select>
                  <input type="button" class="btn" value="获取通道" onclick="clickGetAudioInfo();"/>
                </td>
                <td>
                  <input type="button" class="btn" value="开始对讲" onclick="clickStartVoiceTalk();"/>
                  <input type="button" class="btn" value="停止对讲" onclick="clickStopVoiceTalk();"/>
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <input type="button" class="btn" value="抓图" onclick="clickCapturePic();"/>
                  <input type="button" class="btn" value="开始录像" onclick="clickStartRecord('realplay');"/>
                  <input type="button" class="btn" value="停止录像" onclick="clickStopRecord('realplay');"/>
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <input type="button" class="btn2" value="启用电子放大" onclick="clickEnableEZoom();"/>
                  <input type="button" class="btn2" value="禁用电子放大" onclick="clickDisableEZoom();"/>
                  <input type="button" class="btn2" value="启用3D放大" onclick="clickEnable3DZoom();"/>
                  <input type="button" class="btn2" value="禁用3D放大" onclick="clickDisable3DZoom();"/>
                  <input type="button" class="btn" value="全屏" onclick="clickFullScreen();"/>
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  分辨率：<input id="resolutionWidth" type="text" class="txt"/> x <input id="resolutionHeight" type="text"
                                                                                     class="txt"/>
                  <input type="button" class="btn" value="设备抓图" onclick="clickDeviceCapturePic();"/>
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="draw">
            <legend>绘图</legend>
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td>
                  <input type="button" class="btn" value="启用绘制" onclick="clickEnableDraw();"/>
                  <input type="button" class="btn" value="禁用绘制" onclick="clickDisableDraw();"/>
                </td>
              </tr>
              <tr>
                <td>
                  图形ID：<input id="snapId" type="text" class="txt"/>
                  名称：<input id="snapName" type="text" class="txt"/>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="button" class="btn" value="添加图形" onclick="clickAddSnapPolygon()"/>
                  <input type="button" class="btn" value="删除图形" onclick="clickDelSnapPolygon()"/>
                  <input type="button" class="btn" value="编辑图形" onclick="clickEditSnapPolygon()"/>
                  <input type="button" class="btn" value="停止编辑" onclick="clickStopSnapPolygon()"/>
                  <input type="button" class="btn" value="获取图形" onclick="clickGetSnapPolygon()"/>
                  <input type="button" class="btn" value="设置图形" onclick="clickSetSnapPolygon()"/>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="button" class="btn" value="清空图形" onclick="clickDelAllSnapPolygon()"/>
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="ptz">
            <legend>云台控制</legend>
            <table cellpadding="0" cellspacing="3" border="0" class="left">
              <tr>
                <td>
                  <input type="button" class="btn" value="左上" onmousedown="mouseDownPTZControl(5);"
                         onmouseup="mouseUpPTZControl();"/>
                  <input type="button" class="btn" value="上" onmousedown="mouseDownPTZControl(1);"
                         onmouseup="mouseUpPTZControl();"/>
                  <input type="button" class="btn" value="右上" onmousedown="mouseDownPTZControl(7);"
                         onmouseup="mouseUpPTZControl();"/>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="button" class="btn" value="左" onmousedown="mouseDownPTZControl(3);"
                         onmouseup="mouseUpPTZControl();"/>
                  <input type="button" class="btn" value="自动" onclick="mouseDownPTZControl(9);"/>
                  <input type="button" class="btn" value="右" onmousedown="mouseDownPTZControl(4);"
                         onmouseup="mouseUpPTZControl();"/>
                </td>
              </tr>
              <tr>
                <td>
                  <input type="button" class="btn" value="左下" onmousedown="mouseDownPTZControl(6);"
                         onmouseup="mouseUpPTZControl();"/>
                  <input type="button" class="btn" value="下" onmousedown="mouseDownPTZControl(2);"
                         onmouseup="mouseUpPTZControl();"/>
                  <input type="button" class="btn" value="右下" onmousedown="mouseDownPTZControl(8);"
                         onmouseup="mouseUpPTZControl();"/>
                </td>
              </tr>
            </table>
            <table cellpadding="0" cellspacing="3" border="0" class="left">
              <tr>
                <td class="tt">云台速度</td>
                <td>
                  <select id="ptzspeed" class="sel">
                    <option value="1">1</option>
                    <option value="2">2</option>
                    <option value="3">3</option>
                    <option value="4" selected>4</option>
                    <option value="5">5</option>
                    <option value="6">6</option>
                    <option value="7">7</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">预置点号</td>
                <td><input id="preset" type="text" class="txt" value="1"/></td>
              </tr>
              <tr>
                <td colspan="2">
                  <input type="button" class="btn" value="设置" onclick="clickSetPreset();"/>
                  <input type="button" class="btn" value="调用" onclick="clickGoPreset();"/>
                </td>
              </tr>
            </table>
            <table cellpadding="0" cellspacing="3" border="0" class="left">
              <tr>
                <td class="tt"><input type="button" class="btn2" value="变倍+" onmousedown="PTZZoomIn()"
                                      onmouseup="PTZZoomStop()"></td>
                <td><input type="button" class="btn2" value="变倍-" onmousedown="PTZZoomout()" onmouseup="PTZZoomStop()">
                </td>
              </tr>
              <tr>
                <td class="tt"><input type="button" class="btn2" value="变焦+" onmousedown="PTZFocusIn()"
                                      onmouseup="PTZFoucusStop()"></td>
                <td><input type="button" class="btn2" value="变焦-" onmousedown="PTZFoucusOut()"
                           onmouseup="PTZFoucusStop()"></td>
              </tr>
              <tr>
                <td class="tt"><input type="button" class="btn2" value="光圈+" onmousedown="PTZIrisIn()"
                                      onmouseup="PTZIrisStop()"></td>
                <td><input type="button" class="btn2" value="光圈-" onmousedown="PTZIrisOut()" onmouseup="PTZIrisStop()">
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="playback">
            <legend>回放</legend>
            <table width="100%" cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">码流类型</td>
                <td>
                  <select id="record_streamtype" class="sel">
                    <option value="1">主码流</option>
                    <option value="2">子码流</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">开始时间</td>
                <td>
                  <input id="starttime" type="text" class="txt" value="2013-12-10 00:00:00"/>（时间格式：2013-11-11 12:34:56）
                </td>
              </tr>
              <tr>
                <td class="tt">结束时间</td>
                <td>
                  <input id="endtime" type="text" class="txt" value="2013-12-11 23:59:59"/>
                  <input type="button" class="btn" value="搜索" onclick="clickRecordSearch(0);"/>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <div id="searchdiv" class="searchdiv">
                    <table id="searchlist" class="searchlist" cellpadding="0" cellspacing="0" border="0"></table>
                  </div>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <input type="button" class="btn2" value="开始回放" onclick="clickStartPlayback();"/>
                  <input type="button" class="btn2" value="停止回放" onclick="clickStopPlayback();"/>
                  <input type="button" class="btn" value="倒放" onclick="clickReversePlayback();"/>
                  <input type="button" class="btn" value="单帧" onclick="clickFrame();"/>
                  <input id="transstream" type="checkbox" class="vtop"/>&nbsp;启用转码码流
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <input type="button" class="btn" value="暂停" onclick="clickPause();"/>
                  <input type="button" class="btn" value="恢复" onclick="clickResume();"/>
                  <input type="button" class="btn" value="慢放" onclick="clickPlaySlow();"/>
                  <input type="button" class="btn" value="快放" onclick="clickPlayFast();"/>
                </td>
              </tr>
              <tr>
                <td colspan="2">
                  <input type="button" class="btn" value="抓图" onclick="clickCapturePic();"/>
                  <input type="button" class="btn2" value="开始剪辑" onclick="clickStartRecord('playback');"/>
                  <input type="button" class="btn2" value="停止剪辑" onclick="clickStopRecord('playback');"/>
                  <input type="button" class="btn2" value="OSD时间" onclick="clickGetOSDTime();"/>&nbsp;<input
                  id="osdtime" type="text" class="txt" readonly/>
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="maintain">
            <legend>系统维护</legend>
            <table width="100%" cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td>
                  <input type="button" class="btn2" value="导出配置文件" onclick="clickExportDeviceConfig();"/>
                  <input type="button" class="btn2" value="检查插件版本" onclick="clickCheckPluginVersion();"/>
                  <input type="button" class="btn2" value="远程配置库" onclick="clickRemoteConfig();"/>
                  <input type="button" class="btn2" value="恢复默认参数" onclick="clickRestoreDefault();"/>
                </td>
              </tr>
              <tr>
                <td>
                  <input id="configFile" type="text" class="txt"/>&nbsp;<input type="button" class="btn" value="浏览"
                                                                               onclick="clickOpenFileDlg('configFile', 1);"/>&nbsp;<input
                  type="button" class="btn2" value="导入配置文件" onclick="clickImportDeviceConfig();"/>
                </td>
              </tr>
              <tr>
                <td>
                  <input id="upgradeFile" type="text" class="txt"/>&nbsp;<input type="button" class="btn" value="浏览"
                                                                                onclick="clickOpenFileDlg('upgradeFile', 1);"/>&nbsp;<input
                  type="button" class="btn2" value="升级" onclick="clickStartUpgrade();"/>
                </td>
              </tr>
            </table>
          </fieldset>
          <fieldset class="ipparse">
            <legend>设备IP解析</legend>
            <table cellpadding="0" cellspacing="3" border="0">
              <tr>
                <td class="tt">模式</td>
                <td colspan="3">
                  <select id="devicemode" class="sel" onchange="changeIPMode(this.value);">
                    <option value="1">IPServer</option>
                    <option value="2">HiDDNS</option>
                  </select>
                </td>
              </tr>
              <tr>
                <td class="tt">服务器地址</td>
                <td><input id="serveraddress" type="text" class="txt" value=""/></td>
                <td class="tt">端口号</td>
                <td><input id="serverport" type="text" class="txt" value="7071"/></td>
              </tr>
              <tr>
                <td class="tt">设备标识</td>
                <td><input id="deviceid" type="text" class="txt" value=""/></td>
                <td class="tt">&nbsp;</td>
                <td><input type="button" class="btn" value="获取设备IP" onclick="clickGetDeviceIP();"/></td>
              </tr>
            </table>
          </fieldset>
        </div>
        <div class="left">
          <fieldset class="operate">
            <legend>操作信息</legend>
            <div id="opinfo" class="opinfo"></div>
          </fieldset>
          <fieldset class="callback">
            <legend>事件回调信息</legend>
            <div id="cbinfo" class="cbinfo"></div>
          </fieldset>
        </div>
      </div>
    </div>

  </a-modal>
</template>

<script>
  import '@public/jquery-1.7.1.min.js'
   import { WebVideoCtrl } from '@public/webVideoCtrl.js'
/*  import remoteLoad from '@/utils/remoteLoad.js'*/


  export default {
    components: {},
    name: "CameraModal",
    data() {
      return {
        title: "视频监控",
        visible: false,
        model: {},
        confirmLoading: false,
        g_iWndIndex: 0,//当前选中的窗口
        szDeviceIdentify: '',
        deviceport: '',
        channels: [],
        loginip: '1t71g63874.imwork.net',
        port: '13690',
        username: 'admin',
        password: 'a123456789',
      }
    },
    computed: {},
    mounted() {
    },
    methods: {
      init() {
        // 检查插件是否已经安装过
        var iRet = I_CheckPluginInstall();
        if (-1 == iRet) {
          alert("您还未安装过插件，双击开发包目录里的WebComponentsKit.exe安装！");
          return;
        }

        // 初始化插件参数及插入插件
        I_InitPlugin(500, 300, {
          bWndFull: true,     //是否支持单窗口双击全屏，默认支持 true:支持 false:不支持
          iPackageType: 2,    //2:PS 11:MP4
          iWndowType: 2,
          cbSelWnd: function (xmlDoc) {
            this.g_iWndIndex = parseInt($(xmlDoc).find("SelectWnd").eq(0).text(), 10);
            var szInfo = "当前选择的窗口编号：" + this.g_iWndIndex;
            //this.showCBInfo(szInfo);
          },
          cbDoubleClickWnd: function (iWndIndex, bFullScreen) {
            var szInfo = "当前放大的窗口编号：" + iWndIndex;
            if (!bFullScreen) {
              szInfo = "当前还原的窗口编号：" + iWndIndex;
            }
            this.showCBInfo(szInfo);

            // 此处可以处理单窗口的码流切换
            /*if (bFullScreen) {
                clickStartRealPlay(1);
            } else {
                clickStartRealPlay(2);
            }*/
          },
          cbEvent: function (iEventType, iParam1, iParam2) {
            if (2 == iEventType) {// 回放正常结束
              this.showCBInfo("窗口" + iParam1 + "回放结束！");
            } else if (-1 == iEventType) {
              this.showCBInfo("设备" + iParam1 + "网络错误！");
            } else if (3001 == iEventType) {
              clickStopRecord(g_szRecordType, iParam1);
            }
          },
          cbRemoteConfig: function () {
            this.showCBInfo("关闭远程配置库！");
          },
          cbInitPluginComplete: function () {
            alert("ffffffffffffffffffffff");
            I_InsertOBJECTPlugin("divPlugin");

            // 检查插件是否最新
            if (-1 == I_CheckPluginVersion()) {
              alert("检测到新的插件版本，双击开发包目录里的WebComponentsKit.exe升级！");
              return;
            }
          }
        });
      },
      clickLogin() {
        var szIP = this.loginip,
          szPort = this.port,
          szUsername = this.username,
          szPassword = this.password;

        if ("" == szIP || "" == szPort) {
          return;
        }

        var szDeviceIdentify = szIP + "_" + szPort;

        var iRet = WebVideoCtrl.I_Login(szIP, 1, szPort, szUsername, szPassword, {
          success: function (xmlDoc) {
            this.showOPInfo(szDeviceIdentify + " 登录成功！");

            $("#ip").prepend("<option value='" + szDeviceIdentify + "'>" + szDeviceIdentify + "</option>");
            setTimeout(function () {
              $("#ip").val(szDeviceIdentify);
              this.getChannelInfo();
              this.getDevicePort();
            }, 10);
          },
          error: function (status, xmlDoc) {
            this.showOPInfo(szDeviceIdentify + " 登录失败！", status, xmlDoc);
          }
        });

        if (-1 == iRet) {
          this.showOPInfo(szDeviceIdentify + " 已登录过！");
        }
      },
      // 显示操作信息
      showOPInfo:function(szInfo, status, xmlDoc) {
        var szTip = "<div>" + this.dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo;
        alert(szTip);
        alert(szInfo+status+xmlDoc);
        if (typeof status != "undefined" && status != 200) {
          var szStatusString = $(xmlDoc).find("statusString").eq(0).text();
          var szSubStatusCode = $(xmlDoc).find("subStatusCode").eq(0).text();
          if ("" === szSubStatusCode) {
            szTip += "(" + status + ", " + szStatusString + ")";
          } else {
            szTip += "(" + status + ", " + szSubStatusCode + ")";
          }
        }
        szTip += "</div>";

        $("#opinfo").html(szTip + $("#opinfo").html());
      },
      // 格式化时间
      dateFormat:function(oDate, fmt) {
    var o = {
      "M+": oDate.getMonth() + 1, //月份
      "d+": oDate.getDate(), //日
      "h+": oDate.getHours(), //小时
      "m+": oDate.getMinutes(), //分
      "s+": oDate.getSeconds(), //秒
      "q+": Math.floor((oDate.getMonth() + 3) / 3), //季度
      "S": oDate.getMilliseconds()//毫秒
    };
    if (/(y+)/.test(fmt)) {
      fmt = fmt.replace(RegExp.$1, (oDate.getFullYear() + "").substr(4 - RegExp.$1.length));
    }
    for (var k in o) {
      if (new RegExp("(" + k + ")").test(fmt)) {
        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
      }
    }
    return fmt;
  },

      showCBInfo(szInfo) {      // 显示回调信息
        szInfo = "<div>" + dateFormat(new Date(), "yyyy-MM-dd hh:mm:ss") + " " + szInfo + "</div>";
        $("#cbinfo").html(szInfo + $("#cbinfo").html());
      },
      // 获取通道
       getChannelInfo() {
            var szDeviceIdentify = this.loginip;
      oSel = $("#channels").empty();

    if (null == szDeviceIdentify) {
      return;
    }

    // 模拟通道
    I_GetAnalogChannelInfo(szDeviceIdentify, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find("VideoInputChannel");

        $.each(oChannels, function (i) {
          var id = $(this).find("id").eq(0).text(),
            name = $(this).find("name").eq(0).text();
          if ("" == name) {
            name = "Camera " + (i < 9 ? "0" + (i + 1) : (i + 1));
          }
          oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");
        });
        this.showOPInfo(szDeviceIdentify + " 获取模拟通道成功！");
      },
      error: function (status, xmlDoc) {
        this.showOPInfo(szDeviceIdentify + " 获取模拟通道失败！", status, xmlDoc);
      }
    });
    // 数字通道
    I_GetDigitalChannelInfo(szDeviceIdentify, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find("InputProxyChannelStatus");

        $.each(oChannels, function (i) {
          var id = $(this).find("id").eq(0).text(),
            name = $(this).find("name").eq(0).text(),
            online = $(this).find("online").eq(0).text();
          if ("false" == online) {// 过滤禁用的数字通道
            return true;
          }
          if ("" == name) {
            name = "IPCamera " + (i < 9 ? "0" + (i + 1) : (i + 1));
          }
          oSel.append("<option value='" + id + "' bZero='false'>" + name + "</option>");
        });
        this.showOPInfo(szDeviceIdentify + " 获取数字通道成功！");
      },
      error: function (status, xmlDoc) {
        this.showOPInfo(szDeviceIdentify + " 获取数字通道失败！", status, xmlDoc);
      }
    });
    // 零通道
    I_GetZeroChannelInfo(szDeviceIdentify, {
      async: false,
      success: function (xmlDoc) {
        var oChannels = $(xmlDoc).find("ZeroVideoChannel");

        $.each(oChannels, function (i) {
          var id = $(this).find("id").eq(0).text(),
            name = $(this).find("name").eq(0).text();
          if ("" == name) {
            name = "Zero Channel " + (i < 9 ? "0" + (i + 1) : (i + 1));
          }
          if ("true" == $(this).find("enabled").eq(0).text()) {// 过滤禁用的零通道
            oSel.append("<option value='" + id + "' bZero='true'>" + name + "</option>");
          }
        });
        this.showOPInfo(szDeviceIdentify + " 获取零通道成功！");
      },
      error: function (status, xmlDoc) {
        this.showOPInfo(szDeviceIdentify + " 获取零通道失败！", status, xmlDoc);
      }
    });
  },
      // 获取端口
       getDevicePort() {
    var szDeviceIdentify = this.loginip;

    if (null == szDeviceIdentify) {
      return;
    }

    var oPort = I_GetDevicePort(szDeviceIdentify);
    if (oPort != null) {
      $("#deviceport").val(oPort.iDevicePort);
      $("#rtspport").val(oPort.iRtspPort);

      this.showOPInfo(szDeviceIdentify + " 获取端口成功！");
    } else {
      this.showOPInfo(szDeviceIdentify + " 获取端口失败！");
    }
  },
      add(record) {
        this.visible = true;
        this.init();
        this.model = Object.assign({}, record);
        /*        alert(this.model.loginIp);*/
      },
      close() {
        this.visible = false;
      },
      handleCancel() {
        this.close()
      },
      handleOk() {
        this.close()
      },
    },
    created() {
      /*remoteLoad('src/webvideo/jquery-1.7.1.min.js');*/
    }
  }
</script>
<style scoped>
  * {
    margin: 0;
    padding: 0;
  }

  .html {
    width: 1000px;
    height: 1500px;
    font-size: 12px;
    font-family: Arial, Helvetica, sans-serif;
    -webkit-text-size-adjust: none;
    background: #FFFFFF;
  }

  .body {
    padding: 5px;
  }

  select {
    height: 20px;
    line-height: 20px;
  }

  .left {
    float: left;
  }

  .freeze {
    position: absolute;
    text-align: center;
    background: #343434;
    color: #FFFFFF;
    font-size: 26px;
    font-weight: bold;
    filter: alpha(opacity=60);
    opacity: 0.6;
  }

  .vtop {
    vertical-align: middle;
    margin-top: -1px;
  }

  /*插件*/
  .plugin {
    width: 500px;
    height: 300px;
  }

  fieldset {
    display: block;
  }

  /*本地配置*/
  .localconfig {
    width: 480px;
    padding: 10px;
    border: 1px solid #7F9DB9;
  }

  .localconfig .tt {
    width: 125px;
  }

  .localconfig .txt {
    width: 310px;
  }

  .localconfig .txt2 {
    width: 300px;
  }

  .localconfig .btn {
    width: 45px;
    height: 22px;
    line-height: 18px;
  }

  .localconfig .sel {
    width: 120px;
  }

  /*登录*/
  .login {
    width: 480px;
    padding: 10px;
    border: 1px solid #7F9DB9;
  }

  .login .tt {
    width: 100px;
  }

  .login .txt {
    width: 130px;
  }

  .login .btn {
    width: 45px;
    height: 22px;
    line-height: 18px;
  }

  .login .btn2 {
    width: 100px;
    height: 22px;
    line-height: 18px;
  }

  .login .sel {
    width: 130px;
  }

  .login .sel2 {
    width: 65px;
  }

  /*数字通道*/
  .ipchannel {
    width: 480px;
    padding: 10px;
    border: 1px solid #7F9DB9;
  }

  .ipchannel .btn {
    width: 130px;
    height: 22px;
    line-height: 18px;
  }

  .ipchannel .digitaltdiv {
    height: 100px;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid #7F9DB9;
    font-size: 11px;
  }

  .ipchannel .digitalchannellist th, .ipchannel .digitalchannellist td {
    padding: 2px;
    border: 1px solid #7F9DB9;
    border-collapse: collapse;
    white-space: nowrap;
  }

  /*预览*/
  .preview {
    width: 450px;
    padding: 10px;
    padding-top: 0;
    margin-left: 10px;
    border: 1px solid #7F9DB9;
  }

  .preview .tt {
    width: 60px;
  }

  .preview .txt {
    width: 30px;
  }

  .preview .btn {
    width: 70px;
    height: 22px;
    line-height: 18px;
  }

  .preview .btn2 {
    width: 90px;
    height: 22px;
    line-height: 18px;
  }

  .preview .sel {
    width: 105px;
  }

  /*云台*/
  .ptz {
    width: 450px;
    padding: 10px;
    margin-left: 10px;
    border: 1px solid #7F9DB9;
  }

  .ptz .tt {
    width: 60px;
  }

  .ptz .txt {
    width: 60px;
  }

  .ptz .btn {
    width: 45px;
    height: 22px;
    line-height: 18px;
  }

  .ptz .btn2 {
    width: 60px;
    height: 22px;
    line-height: 18px;
  }

  .ptz .sel {
    width: 65px;
  }

  /*视频参数*/
  .videoparam {
    width: 450px;
    padding: 10px;
    margin-left: 10px;
    border: 1px solid #7F9DB9;
  }

  .videoparam .tt {
    width: 60px;
  }

  .videoparam .txt {
    width: 60px;
  }

  .videoparam .btn {
    width: 45px;
    height: 22px;
    line-height: 18px;
  }

  .videoparam .sel {
    width: 65px;
  }

  /*回放*/
  .playback {
    width: 450px;
    padding: 10px;
    margin-left: 10px;
    border: 1px solid #7F9DB9;
  }

  .playback .tt {
    width: 60px;
  }

  .playback .txt {
    width: 140px;
  }

  .playback .btn {
    width: 45px;
    height: 22px;
    line-height: 18px;
  }

  .playback .btn2 {
    width: 70px;
    height: 22px;
    line-height: 18px;
  }

  .playback .sel {
    width: 142px;
  }

  .playback .searchdiv {
    height: 100px;
    overflow: hidden;
    overflow-y: auto;
    border: 1px solid #7F9DB9;
    font-size: 11px;
  }

  .playback .searchlist th, .playback .searchlist td {
    padding: 2px;
    border: 1px solid #7F9DB9;
    border-collapse: collapse;
    white-space: nowrap;
  }

  /*系统维护*/
  .maintain {
    width: 450px;
    padding: 10px;
    margin-left: 10px;
    border: 1px solid #7F9DB9;
  }

  .maintain .tt {
    width: 60px;
  }

  .maintain .txt {
    width: 280px;
  }

  .maintain .btn {
    width: 45px;
    height: 22px;
    line-height: 18px;
  }

  .maintain .btn2 {
    width: 100px;
    height: 22px;
    line-height: 18px;
  }

  .maintain .sel {
    width: 65px;
  }

  /*操作信息*/
  .operate {
    width: 450px;
    padding: 10px;
    margin-left: 10px;
    border: 1px solid #7F9DB9;
  }

  .operate .opinfo {
    height: 150px;
    border: 1px solid #7F9DB9;
    overflow: auto;
  }

  /*事件回调*/
  .callback {
    width: 450px;
    padding: 10px;
    margin-left: 10px;
    border: 1px solid #7F9DB9;
  }

  .callback .cbinfo {
    height: 114px;
    border: 1px solid #7F9DB9;
    overflow: auto;
  }

  /*IP解析*/
  .ipparse {
    width: 450px;
    padding: 10px;
    margin-left: 10px;
    border: 1px solid #7F9DB9;
  }

  .ipparse .tt {
    width: 85px;
  }

  .ipparse .txt {
    width: 130px;
  }

  .ipparse .btn {
    width: 90px;
    height: 22px;
    line-height: 18px;
  }

  .ipparse .sel {
    width: 130px;
  }

  /*绘图*/
  .draw {
    width: 450px;
    padding: 10px;
    padding-top: 0;
    margin-left: 10px;
    border: 1px solid #7F9DB9;
  }

  .draw .tt {
    width: 60px;
  }

  .draw .txt {
    width: 140px;
  }

  .draw .btn {
    width: 70px;
    height: 22px;
    line-height: 18px;
  }

  .draw .btn2 {
    width: 100px;
    height: 22px;
    line-height: 18px;
  }

  .draw .sel {
    width: 105px;
  }
</style>